<template>
    <Header title="团队信息管理"></Header>
    <div class="box">
        <div class="box-header">
            <span class="s1">数据筛选</span>
            <el-divider />
            <div class="header-btn">
                <span class="s2">输入查询：</span>
                <el-input v-model="qyery.id" placeholder="团检单位.联系人姓名.电话" :clearable="true"/>
                <el-row class="mb-4">
                    <el-button type="primary" color="#0079fe" @click="telSearch">查询</el-button>
                    <el-button @click="resetting">重置</el-button>
                </el-row>
            </div>
        </div>
        <div class="btn">
            <button props:addDisplay>
                <TeamAdd @addChange="updatePage" :addDisplay="true"></TeamAdd>
            </button>           
            <button @click="deleteClick">
                删除
                <div class="dellist" v-show="isShow" ref="delManyOption">
                    <input type="button" value="已勾选数据"  @click="delSelect" backgroundColor="gray"/>
                    <input type="button" value="未勾选数据" @click="delNoselect"/>
                </div>
            </button>
            <button>团检详情管理</button>
        </div>
        <div class="biaoge">
            <el-table :data="tableData" style="width:100%" @selection-change="handleSelectionChange" :border="true"
                :cell-style="{ 'text-align': 'center', 'font-size': '12px' }" :header-cell-style="{
                    'text-align': 'center', 'background-color': '#f9fafc',
                    'color': '#666'
                }">
                <el-table-column type="selection" min-width="53" />
                <el-table-column prop="id" label="编码" min-width="140" />
                <el-table-column prop="unit" label="团检单位" min-width="179" />
                <el-table-column prop="total" label="总团检人数" min-width="81" />
                <el-table-column prop="appointment" label="已预约人数" min-width="80" />
                <el-table-column prop="physical" label="已体检人数" min-width="80" />
                <el-table-column prop="contacts" label="联系人" min-width="112" />
                <el-table-column prop="tel" label="联系电话" min-width="110" />
                <el-table-column label="操作" min-width="179">
                    <template #default="scope">
                                    <div class="delAndbianji">
                                        <p class="s5" style="color:#1abc9c;padding-right: 10px;">
                                            <TeamAdd  @addChange="updatePage" :addDisplay="false" :peopleId="scope.row.id"></TeamAdd>
                                        </p>
                                        <el-popconfirm title="您确认要删除嘛?" confirm-button-text="是" cancel-button-text="否"
                                            @confirm="delClick(scope.row.id)">
                                            <template #reference>
                                                <p style="color:#1abc9c;display: flex;align-items: center;">删除</p>
                                            </template>
                                        </el-popconfirm>
                                    </div>
                                </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <div class="demo-pagination-block">
                <span class="page1">每页：</span>
                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" layout="sizes,slot, prev,pager,next,jumper"
                    background :total="total" :default-page-size="10" :page-sizes="[10, 20, 30, 40, 50]">
                    <template #default>
                        <span>共{{pages}}页/{{total}}条数据</span>
                    </template>
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import Header from '../../component/header.vue'
import { reactive, ref,watch } from 'vue'
import { ElTable, ElMessage, ElMessageBox, ElNotification } from 'element-plus'
import service from '@/utils/service';
import TeamAdd from './teamAdd.vue'
import type { AxiosResponse } from 'axios';
//分页
//当前页
const currentPage = ref(1)
//每页显示数据条数
const pageSize = ref(10)
//总数据量
const total = ref(0)
//总共多少页
const pages = ref(parseInt(((total.value / pageSize.value)as unknown)as string)+1)
//点击时显示
const isShow = ref(false)

//定义页面列表数据
interface User{
    "encoded":string,
      "unit":string,
      "total":66,
      "appointment":299,
      "physical":number,
      "contacts":string
      "tel":number,
      "id":number
}
//页面数据显示
const tableData = reactive<User[]>([])
//定义查询条件
interface ISearch{
    id?:string,
    unit?:string,
    contacts?:string,
    tel?:string,
    _limit?: number,
    _page?: number,
}
const qyery = reactive<ISearch>({
    id:''
})
//精确搜索
const getDataByAnySituation= async (qyery:ISearch)=>{
    let obj:ISearch = {}
    let searchReg = /^1[3-9]\d{9}$/
    let contactsRge = /^[\u4e00-\u9fa5]{2,4}$/
    if(qyery.id && contactsRge.test(qyery.id as string)){
        obj.contacts = qyery.id
    }
    if(qyery.id && searchReg.test(qyery.id as string)){
        obj.tel = qyery.id
    }
    await service({
        url:`/peopleList`,
        params:obj
    }).then(res=>{
        if(res.data){
            total.value = res.data.length
            obj._limit = pageSize.value
            obj._page = currentPage.value
        }
    })
    await service({
        url:'/peopleList',
        params:obj
    }).then(res=>{
        tableData.length = 0;
        tableData.push(...res.data)
        console.log("tableData",tableData.length);
        
    })
}
watch([currentPage, pageSize], () => {
    getDataByAnySituation(qyery)
})


//监听变化


getDataByAnySituation(qyery)
const telSearch = ()=>{
    getDataByAnySituation(qyery)
    console.log('查询',telSearch);
    
}


 //重置
 const resetting = ()=>{
    qyery.id = ''
    getDataByAnySituation(qyery)
 }

// 获取表格组件
// const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = reactive<User[]>([])

// 获取选中行的数据
const handleSelectionChange = (val: User[]) => {
    multipleSelection.length = 0
    multipleSelection.push(...val)

}
//删除单条
const delClick = async(id:string)=>{
    let res = await service({
        url:`/peopleList/${id}`,
        method:'delete'
    })
        if(res.data){
            ElMessage({
            message: "删除成功！",
            type: "success"
        })
        }
        getDataByAnySituation(qyery)    
}
const delManyOption = ref(null)
//点击删除显示删除选项
const deleteClick =(e:MouseEvent)=>{
  e.stopPropagation();
  ((delManyOption.value as unknown)as HTMLElement).style.top = `${e.offsetX}px`;
  ((delManyOption.value as unknown)as HTMLElement).style.top = `${e.offsetY}px`;
  isShow.value = true
}
//隐藏删除选项框
document.onclick =()=>{
    isShow.value = false
}
//删除多条选中数据
const delSelect=()=>{
    if (multipleSelection.length == 0) {
        ElMessageBox.alert('请先选择数据！', {
            confirmButtonText: '确认'
        }).catch(() => { })
    } else {
        ElMessageBox.confirm(
            '是否确定删除数据？',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async () => {
                multipleSelection.forEach(item => {
                    service({
                        url: `/testOptions/${item.id}`,
                        method: "delete"
                    })
                })
                getDataByAnySituation(qyery)
                ElNotification({
                    title: '',
                    dangerouslyUseHTMLString: true,
                    message: '<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" style="width:30px;height:30px;margin-right:5px;"/><strong>删除成功</strong>',
                })
            })
            .catch(() => {
                ElNotification({
                    title: '',
                    dangerouslyUseHTMLString: true,
                    message: '<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" style="width:30x;height:30px;margin-right:5px;"/><strong>取消删除</strong>',
                })
            })
    }
}
// 删除未选中的数据
const delNoselect = async () => {
    if (multipleSelection.length === 0) {
        ElMessageBox.alert('请先选择数据！', {
            confirmButtonText: '确认'
        }).catch(() => { })
    } else {
        // 未选中的数据(获取未选中)
        let checkedKeys = <number[]>[]
        multipleSelection.forEach(item => {
            checkedKeys.length = 0
            checkedKeys.push(item.id)
        })
        let unselectedData = reactive<User[]>([])
        unselectedData.length = 0
        tableData.forEach(item => {
            if (!checkedKeys.includes(item.id)) {
                unselectedData.push({ ...item })
            }
        })
        ElMessageBox.confirm(
            '是否确定删除数据？',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async () => {
                unselectedData.forEach(item => {
                    service({
                        url: `/testOptions/${item.id}`,
                        method: "delete"
                    }).then((res: AxiosResponse) => { })
                })
                getDataByAnySituation(qyery)
                ElNotification({
                    title: '',
                    dangerouslyUseHTMLString: true,
                    message: '<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" style="width:30x;height:30px;margin-right:5px;"/><strong>删除成功</strong>',
                })

            })
            .catch(() => {
                ElNotification({
                    title: '',
                    dangerouslyUseHTMLString: true,
                    message: '<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" style="width:30x;height:30px;margin-right:5px;"/><strong>取消删除</strong>',
                })
            })
    }
}

const updatePage = () => {
    getDataByAnySituation(qyery)
}
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    margin: 10px 0 0 0;
}
.box-header {
    height: 130px;
    border: 1px solid #f1f1f1;
    margin: 0 10px 10px 7px;
    font-size: 14px;
}

.s1 {
    display: block;
    height: 28px;
    line-height: 49px;
    font-weight: 700;
    padding: 0 25px;

}

.el-input {
    width: 480px;
    height: 35px;
}

.s2 {
    padding-left: 40px;
    line-height: 28px;
}
.header-btn{
    display: flex;
}
.mb-4{
    margin-left: 400px;
}
.btn button {
    width: 90px;
    height: 30px;
    float: left;
    background-color: white;
    border: 1px solid #ccc;
    margin: 5px;
    position: relative;
    font-size: 12px;
}

.btn {
    margin-left: 15px;
    margin-bottom: 20px;
    height: 30px;
}
.biaoge {
    margin: 0 10px 10px 20px;

}
.s5:hover {
    text-decoration: underline;
}
.delAndbianji{
    display: flex;
    justify-content: center;
}
.dellist {
    width: 88px;
    height: 63px;
    border: 1px solid rgb(93, 93, 93);
    border-radius: 2px;
    text-align: center;
    position: absolute;
    z-index: 999;
}

.dellist input {
    width: 77px;
    height: 23px;
    line-height: 23px;
    background-color: rgba(238, 234, 234, 0.742);
    border: 1px solid gray;
    border-radius: 2px;
    text-align: center;
    margin: 5px;
}
/* 分页 */
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
.demo-pagination-block{
    display: flex;
    float: right;
}
.demo-pagination-block span{
    padding-left: 30px;
}
.page1{
  font-size: 14px;
  padding-top: 8px;
}
</style>